
  <template>
    <div class="menu">
     <!-- 2 -->
     <template v-for="item in menu" :key="item.id">
        <el-sub-menu :index="item.path" v-if="!item.Pid && item.children.length > 0" >
          <template #title>
            <el-icon><location /></el-icon>
            <span>{{ item.title }}</span>
          </template>
          <houduanMenus :menu="item.children"></houduanMenus>
        </el-sub-menu>

           <!-- 1 -->
           <el-menu-item v-else :index="item.path">
          <el-icon><icon-menu /></el-icon>
          <template #title>{{ item.title }}</template>
        </el-menu-item>
     </template>
    </div>
    </template>
    
    <script lang="ts" setup>
    import { ref } from 'vue'
    import {
      Document,
      Menu as IconMenu,
      Location,
      Setting,
    } from '@element-plus/icons-vue'
    const props = defineProps(['menu'])
    const menu = ref(props.menu)

    </script>
    
    <style>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
     
    }
    </style>
  